import { View } from 'react-native';
import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import RecommendSreen from './RecommendSreen/RecommendSreen';
import FreeCourseSreen from './FreeCourseSreen/FreeCourseSreen';
import CombatCourseSreen from './CombatCourseSreen/CombatCourseSreen';
import SystemCourseSreen from './SystemCourseSreen/SystemCourseSreen';
import UniqueSreen from './UniqueSreen/UniqueSreen';
import TeachCourseSreen from './TeachCourseSreen/TeachCourseSreen';

const HomeSreen = () => {
  const Tab = createMaterialTopTabNavigator();

  const TabbarData = [
    { title: '推荐', component: RecommendSreen },
    { title: '免费课', component: FreeCourseSreen },
    { title: '实战课', component: CombatCourseSreen },
    { title: '体系课', component: SystemCourseSreen },
    { title: '专栏', component: UniqueSreen },
    { title: '教程', component: TeachCourseSreen },
  ];

  return (
    <View style={{ flex: 1 }}>
      <Tab.Navigator
        screenOptions={
          {
            // swipeEnabled: false, // 禁用滑动切换
          }
        }
      >
        {TabbarData.map(item => {
          return (
            <Tab.Screen
              options={{
                tabBarLabelStyle: { fontSize: 14, fontWeight: 'bold' },
                tabBarStyle: { backgroundColor: '#fff' }, // 修改TabBar的背景颜色
                tabBarIndicatorStyle: { backgroundColor: '#1ba5fd' }, // 修改TabBar指示器的颜色
                tabBarScrollEnabled: true, // 启用TabBar滚动
              }}
              name={item.title}
              component={item.component}
            />
          );
        })}
      </Tab.Navigator>
    </View>
  );
};

export default HomeSreen;
